<template>
	<div class="org-chart-node" :class="props.direction">
		<!--level1-->
		<div
			class="org-chart-label"
			:class="[
				{
					'label-line--after': !node.expanded && node.children.length > 0,
					'label-line--before': node.children.length > 0
				},
				node.className
			]"
		>
			<div
				class="org-chart-node-label-inner text-base"
				@contextmenu="onContextmenu"
				:class="[bordered ? 'label--bordered' : 'label--boxshadow']"
			>
				<div class="org-label-inner-input" v-if="node.focus">
					<input
						v-focus="node.id"
						class="block focus:text-sky-500 duration-100 input"
						type="text"
						v-model="node.name"
						@blur="onBlur"
					/>
				</div>
				<div v-else>
					<div>
						{{ node.name }}
						<img src="../../assets/a.jpg" alt="">
					</div>
					<div
						class="pt-2 custom-content text-sm text-gray-400"
						v-show="node.customContent"
					>
						{{ node.customContent }}
					</div>
				</div>
			</div>
			<div
				class="org-node-btn"
				:class="{
					'org-node-btn--expand': !node.expanded && node.children.length > 0
				}"
				@click="onButtonClick()"
				v-if="node.children && node.children.length > 0"
			></div>
		</div>
		<!--level2-->
		<div
			class="org-chart-node-children"
			:class="{
				'children-line--before': node.children && node.children.length
			}"
			:style="{
				visibility: node.expanded ? '' : 'hidden'
			}"
			v-if="node.children"
		>
			<org-tree
				:bordered="bordered"
				v-for="child in node.children"
				:node="child"
				:key="child.id"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { inject } from "vue";

const props = defineProps(["node", "direction", "bordered"]);
const { node } = props;

const onButtonClick = () => {
	node.expanded = !node.expanded;
};

const context = inject("context");

// 右键菜单
const onContextmenu = (event: MouseEvent) => {
	event.preventDefault();
	event.stopPropagation();
	context.showMenu({ node, left: event.clientX, top: event.clientY });
};

const onBlur = () => {
	node.focus = false;
};
</script>

<style lang="scss" scoped></style>
